<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%
}

body {
	margin: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup,
	main, nav, section, summary {
	display: block
}

audio, canvas, progress, video {
	display: inline-block;
	vertical-align: baseline
}

audio


:not

 

(
[
controls
]

 

){
display


:

 

none


;
height


:

 

0
}
[hidden], template {
	display: none
}

a {
	background: transparent
}

a:active, a:hover {
	outline: 0
}

abbr[title] {
	border-bottom: 1px dotted
}

b, strong {
	font-weight: bold
}

dfn {
	font-style: italic
}

h1 {
	font-size: 2em;
	margin: 0.67em 0
}

mark {
	background: #ff0;
	color: #000
}

small {
	font-size: 80%
}

sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sup {
	top: -0.5em
}

sub {
	bottom: -0.25em
}

img {
	border: 0
}

svg


:not

 

(
:root

 

){
overflow


:

 

hidden




}
figure {
	margin: 1em 40px
}

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0
}

pre {
	overflow: auto
}

code, kbd, pre, samp {
	font-family: monospace, monospace;
	font-size: 1em
}

button, input, optgroup, select, textarea {
	color: inherit;
	font: inherit;
	margin: 0
}

button {
	overflow: visible
}

button, select {
	text-transform: none
}

button, html input[type="button"], input[type="reset"], input[type="submit"]
	{
	-webkit-appearance: button;
	cursor: pointer
}

button[disabled], html input[disabled] {
	cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0
}

input {
	line-height: normal
}

input[type="checkbox"], input[type="radio"] {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button
	{
	height: auto
}

input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration
	{
	-webkit-appearance: none
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em
}

legend {
	border: 0;
	padding: 0
}

textarea {
	overflow: auto
}

optgroup {
	font-weight: bold
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

td, th {
	padding: 0
}

.select {
	display: inline-block;
	/* 1 */
	position: relative;
	/* 2 */
	vertical-align: middle;
	/* 3 */
	padding: 0;
	/* 4 */
	overflow: hidden;
	/* 5 */
	background: #fff;
	color: #555;
	border: 1px solid #aaa;
	text-shadow: none;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-transition: box-shadow 0.25s ease;
	-o-transition: box-shadow 0.25s ease;
	-webkit-transition: box-shadow 0.25s ease;
	transition: box-shadow 0.25s ease;
	/* 6 */
	/* 6 */
}

.select:hover {
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.select:before {
	position: absolute;
	/* 7 */
	top: 0.5em;
	/* 7 */
	right: 0.5em;
	/* 7 */
	pointer-events: none;
	/* 8 */
}

.select select {
	cursor: pointer;
	/* 9 */
	padding: 0.5em;
	/* 10 */
	padding-right: 2em;
	/* 11 */
	width: 130%;
	/* 12 */
	border: none;
	/* 13 */
	background: transparent;
	/* 13 */
	background-image: none;
	/* 13 */
	-webkit-appearance: none;
	/* 13 */
	-moz-appearance: none;
	/* 13 */
	appearance: none;
	/* 13 */
	text-indent: 0.01px;
	/* 14 */
	text-overflow: '';
	/* 14 */
	width: 160% \9;
	/* 15 */
}

.select select:focus {
	outline: none;
	/* 16 */
}

/****************************
 ****************************
 ****************************
 * Helpers
 */
.select:before {
	font-family: "icons";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon--down:before, .select:before {
	content: "\e600";
}

@font-face {
	font-family: 'icons';
	src:
		url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAARgAAoAAAAABBgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAANgAAADYZbVvCE9TLzIAAAHMAAAAYAAAAGAIIvy2Y21hcAAAAiwAAABMAAAATBpVzFdnYXNwAAACeAAAAAgAAAAIAAAAEGhlYWQAAAKAAAAANgAAADYAl8viaGhlYQAAArgAAAAkAAAAJANuAeZobXR4AAAC3AAAABQAAAAUAwAAdG1heHAAAALwAAAABgAAAAYABVAAbmFtZQAAAvgAAAFFAAABRVcZpu5wb3N0AAAEQAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAAB2Dx0AAAB7ER0AAAAJHQAAAM8SAAYBAQgPERMWG2ljb21vb25pY29tb29udTB1MXUyMHVFNjAwAAACAYkAAwAFAQEEBwoNTPyUDvyUDvyUDvuUDvgg958VgYD7AiOLi4aFg4iEi4SLg46GkYuL+wLzgZaAloqel5eWlpqMmX8I7yvv6wWZl5qKloCXf4p4gIAIDviUFPiUFYsMCgADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOYAAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAAQAg5gD//f//AAAAAAAg5gD//f//AAH/4xoEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAQAAss1nQF8PPPUACwIAAAAAAM/2xdgAAAAAz/bF2AAAAAABjAE1AAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAGMAAEAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAQAAAAIAAHQAAFAAAAUAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKADQAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKADQAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAxAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==)
		format("woff");
	font-weight: normal;
	font-style: normal;
}

body {
	padding: 1em;
	font-size: 20px;
	color: #090;
	background: #eee;
	text-align: center;
}
</style>

</head>
<body>
	<div style="text-align: center; clear: both;">
		<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
		<script src="/follow.js" type="text/javascript"></script>
		<script src="echarts.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script> 
	</div>
	<h2>Custom Select</h2>

	<div class="select">
	
		<select id='ms' name='make' onchange="show_sub(this.options[this.options.selectedIndex].label,this.options[this.options.selectedIndex].value)">
		</select>
		<script type="text/javascript">
			var url = '${pageContext.request.contextPath}/ServletForManager';
			var obj = document.getElementById('ms');
			$.getJSON(url).done(function(json) {
				work = json.titles;
				for (var i in work) {
					obj.options.add(new Option(work[i], i));
				}
			})
	    	
        
    	</script>
	</div>
	<br></br>
	<div id="main" style="width:80%;height:70%;position: absolute; left:10% "></div>
    <script type="text/javascript">
	    function show_sub(u,v){
	    	
	    	$.post({ type: "Post",
                url: "${pageContext.request.contextPath}/ServletForManager", 
                data: {num:v},
            }); 
	    	var myChart = echarts.init(document.getElementById('main'));  
			var url = '${pageContext.request.contextPath}/ServletForManager';  
			$.getJSON(url).done(function(json) {
				groups = json.groups;
				cnt = json.cnt;
				aver = json.aver;
				stdev = json.stdev;
				
				var pieData = new Array();
				for (var i = 0; i < cnt.length; i++) {
					pieData[i] = {value:cnt[i], name:groups[i]};
				}
				
	  
				var option = {  
					title : {  
						text : u 
					},  
					tooltip : {},  
					legend : {
						data : [ '人数' ]  
					},  
					xAxis : {  
						data : groups  
					},  
					yAxis : {},  
					series : [{  
						name : '人数',  
						type : 'bar',
						itemStyle: {
			                normal: {
			                    color: new echarts.graphic.LinearGradient(
			                        0, 0, 0, 1,
			                        [
			                            {offset: 0, color: '#83bff6'},
			                            {offset: 0.5, color: '#188df0'},
			                            {offset: 1, color: '#188df0'}
			                        ]
			                    )
			                },
			                emphasis: {
			                    color: new echarts.graphic.LinearGradient(
			                        0, 0, 0, 1,
			                        [
			                            {offset: 0, color: '#2378f7'},
			                            {offset: 0.7, color: '#2378f7'},
			                            {offset: 1, color: '#83bff6'}
			                        ]
			                    )
			                }
			            },
						data : cnt  
					},
					{
						name:'占比',
						type:'pie',
						tooltip : {
					        trigger: 'item',
					        formatter: "{b} {a} :<br/>({d}%)"
					    },
						center: ['27%', '35%'],
						radius: ['10%', '40%'],
						roseType : 'area',
						label: {
			                normal: {
			                    show: true
			                },
			                emphasis: {
			                    show: true,
			                }
			            },
			            lableLine: {
			                normal: {
			                    show: true
			                },
			                emphasis: {
			                    show: true
			                }
			            },
						data:pieData
					}],  
					toolbox : {  
						show : true,  
						feature : {  
							mark : {  
								show : true  
							},  
							dataView : {  
								show : true,  
								readOnly : false  
							},  
							magicType : {  
								show : true,  
								type : ['bar']  
							},  
							restore : {  
								show : true  
							},  
							saveAsImage : {  
								show : true  
							}  
						}  
					},  
				}  
				myChart.setOption(option);  
				$("showDiv").remove();
				var createDiv = document.createElement("showDiv");  
			    createDiv.innerHTML = "平均:" + aver + " 标准差:" + stdev + "</br>";  
			    $("#main").append(createDiv);  
				
			}) 
			
	    }  
        
    </script>
</body>
</html>